<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../static/plugins/jquery-easyui-1.10.19/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../static/plugins/jquery-easyui-1.10.19/themes/icon.css">
    <script type="text/javascript" src="../static/plugins/jquery-easyui-1.10.19/jquery.min.js"></script>
    <script type="text/javascript" src="../static/plugins/jquery-easyui-1.10.19/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../static/plugins/jquery-easyui-1.10.19/datagrid-export.js"></script>
    <script type="text/javascript" src="../static/plugins/jquery-easyui-1.10.19/locale/easyui-lang-zh_CN.js"></script>

    <script>
        $(function () {
            $('#dg').datagrid({
                url: '/lab00/ServletUser?action=getdglist',
                toolbar: '#tb',
                pagination: true,
                fit: true,
                singleSelect: true,//分页
                columns: [[
                    {field: 'username', title: '账号', width: 100},
                    {field: 'password', title: '密码', width: 100},
                ]]
            });


            //编辑功能
            $('#btnEdit').click(function () {
                if ($('#dg').datagrid('getSelected') == null) {
                    $.messager.alert('提示', '请选择要编辑的数据', 'warning');
                    return;
                }
                $('#dd').dialog({
                    title: '编辑数据',
                    width: 500,
                    height: 350,
                    closed: false,
                    cache: false,
                    href: 'userform.jsp?action=edit&r=' + Math.random(),
                    modal: true,
                    buttons: [{
                        text: '保存',
                        iconCls: 'icon-save',
                        handler: function () {
                            let isOk = $('#ff').form('validate');
                            if (isOk) {
                                $.messager.confirm('确认', '是否确认修改？', function (r) {
                                    if (r) {
                                        SaveData('update');
                                    }
                                });
                            }
                        }
                    }, {
                        text: '退出',
                        iconCls: 'icon-back',
                        handler: function () {
                            $('#dd').dialog('close');

                        }
                    }]
                });
            })

            //添加和修改的保存
            function SaveData(action) {

                $.messager.progress();	// display the progress bar
                $('#ff').form('submit', {
                    url: '/lab00/ServletUser?action=' + action,
                    onSubmit: function () {
                        var isValid = $(this).form('validate');
                        if (!isValid) {
                            $.messager.progress('close');	// hide progress bar while the form is invalid
                        }
                        return isValid;	// return false will stop the form submission
                    },
                    success: function (data) {
                        let result = eval('(' + data + ')');
                        if (result.code == '200') {
                            $.messager.alert('提示', result.msg, 'info');
                            $('#add').dialog('close');
                            $('#dg').datagrid('reload');
                        } else
                            $.messager.alert('提示', result.msg, 'warning')
                        $.messager.progress('close');
                        // hide progress bar while submit successfully
                    }
                });
            }
        })
    </script>

</head>
<body class="easyui-layout">
<div data-options="region:'center',border:false">
    <table id="dg"></table>
</div>
<div id="dd"></div>
<div id="tb" style="height:auto">
    <table>
        <tr>
            <td><a id="btnEdit" href="javascript:void(0)" class="easyui-linkbutton"
                   data-options="iconCls:'icon-edit',plain:true">修改密码</a></td>
        </tr>
    </table>
</div>
</body>
</html>
<%--style="width:40%;max-width:400px;padding:30px 60px;"--%>
<%--style="width:100%"--%>